<template>
  <div class="app-page">
    <div class="content">
      <el-card class="left">
        <div slot="header" class="clearfix">
          <span>机构</span>
        </div>
        <div class="btns">
          <auth-button auth-key="e_2_1" type="primary" icon="el-icon-plus" size="small" @click="handleAdd">
            新增
          </auth-button>
          <auth-button auth-key="e_2_2" icon="el-icon-edit-outline" size="small" @click="handleEdit">
            修改
          </auth-button>
        </div>
        <el-tree
          ref="tree"
          node-key="id"
          highlight-current
          :default-expanded-keys="expandedKeys"
          :data="orgList"
          :props="defaultProps"
          @current-change="handleTreeSelected"
        />
      </el-card>
      <div class="right">
        <el-card>
          <div slot="header" class="clearfix">
            <span>部门</span>
          </div>
          <department ref="dept" :org-list="deptOrgList" :selected-org-id="selectedOrgId" />
        </el-card>
        <el-card>
          <div slot="header" class="clearfix">
            <span>岗位</span>
          </div>
          <post :selected-org-id="selectedOrgId" />
        </el-card>
      </div>
    </div>

    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="500px">
      <super-form
        label-width="160px"
        size="small"
        form-ref="formDemo"
        :form-data="modalFormData"
        :render-form-item="modalFormItem"
        :form-buttons="formButtons"
      />
    </el-dialog>
  </div>
</template>

<script>
import { createTreeList } from '@/utils'
import { SuperForm, AuthButton } from '@/components'
import { Post, Department } from './components'
import { orgFormConfig } from './config'
import { fetchOrgFindPage, fetchOrgAdd, fetchOrgGet, fetchOrgUpdate } from '@/api/basicinfo/system/organization'

const LEVEL_MAX = 3

export default {
  name: 'Organization',
  components: { SuperForm, Post, Department, AuthButton },
  data() {
    return {
      expandedKeys: [], // 默认展开
      orgList: [], // 机构列表
      deptOrgList: [],
      defaultProps: {
        children: 'children',
        label: 'orgName'
      },

      dialogVisible: false,
      dialogTitle: '新增',

      isHide: false, // 是否隐藏管理员账号输入框
      selectedOrgData: {}, // 机构选中数据
      selectedOrgId: 0, // 选中机构的 id
      modalFormItem: [], // 机构弹窗渲染元素
      modalFormData: {}, // 机构弹窗数据

      formButtons: {
        isDialog: true,
        submitName: '确定',
        resetName: '取消',
        submitCallback: values => this.handleSubmit(values),
        resetCallback: () => (this.dialogVisible = false)
      }

    }
  },
  created() {
    this.postOrgFindPage()
  },
  methods: {
    handleTreeSelected(data, node) { // 机构选中
      this.selectedOrgData = data
      this.selectedOrgId = data.id
      this.$refs.dept.queryFormData = { orgId: data.id }
      this.$refs.dept.postFindPage()
      if (data.level === LEVEL_MAX) return false
      const index = this.expandedKeys.indexOf(data.id)
      if (index < 0) {
        this.expandedKeys.push(data.id)
      } else {
        this.expandedKeys.splice(index, 1)
      }
    },

    handleAdd() { // 点击添加机构
      if (!this.selectedOrgData.id) {
        this.$message.warning('请选择上级机构')
        return false
      }
      const { id, level } = this.selectedOrgData
      if (level === LEVEL_MAX) {
        this.$message.warning(`机构级别最多${LEVEL_MAX}级!`)
        return false
      }
      this.modalFormData = {
        parentOrgId: id,
        level: level + 1
      }
      this._setModalData('新增', true, this.modalFormData)
    },

    handleEdit() { // 修改
      const { id, level } = this.selectedOrgData
      let message = ''
      switch (level) {
        case undefined:
          message = '请选择机构'
          break
        case 1:
          message = '最高级别不予许修改!'
          break
        default:
          this.postGet(id)
          return
      }
      this.$message.warning(message)
    },

    handleSubmit(values) { // 机构新增提交
      if (values.id) {
        this.postUpdate(values)
        return false
      }
      this.postAdd(values)
    },

    _createOrgFormItem() {
      this.modalFormItem = orgFormConfig(this.deptOrgList, this.isHide)
    },

    _setModalData(title = '新增', visible = true, modalFormData = {}) { // 设置弹窗
      this.modalFormData = modalFormData
      this.dialogTitle = title
      this.dialogVisible = visible
      this.isHide = title !== '新增'
      this._createOrgFormItem()
    },

    postOrgFindPage() { // 获取机构列表
      fetchOrgFindPage().then(res => {
        this.deptOrgList = res.records
        this.orgList = createTreeList(res.records)
        this._createOrgFormItem()
      })
    },

    postAdd(values) { // 新增
      fetchOrgAdd(values).then(() => {
        this.$message.success('新增成功')
        this.dialogVisible = false
        this.postOrgFindPage()
      })
    },

    postGet(id) { // 获取详情
      fetchOrgGet({ id }).then(res => {
        this._setModalData('修改', true, res)
      })
    },

    postUpdate(values) { // 更新
      fetchOrgUpdate(values).then(() => {
        this.dialogVisible = false
        this.$message.success('修改成功')
        this.postOrgFindPage()
      })
    }

  }
}
</script>

<style lang="scss" scoped>
.app-page {
  .content {
    min-height: calc(100vh - 132px);
    display: flex;
    justify-content: flex-start;

    .left {
      min-width: 240px;

      .btns {
        margin-bottom: 10px;
      }
    }
    .right {
      width: 100%;
      box-sizing: border-box;
      overflow: auto;

      .add-btn {
        float: right;
      }
    }

    .table {
      clear: both;
      width: 100%;
    }

    .title {
      margin-top: 20px;
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 20px;
    }
  }
}
</style>
